<template>
  <div class="app-container">
    <!-- 查询条件框 -->
    <el-card v-show="!showAttrDetail" class="box-card">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item v-model="form.name" label="标题">
          <el-input placeholder="请输入标题" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button type="primary" plain>添加轮播图</el-button>
        </el-form-item>
      </el-form>
      <el-divider />
      <!-- 信息列表 -->
      <el-table :data="banners" style="width: 100%" stripe class="table">
        <el-table-column prop="id" label="编号" width="50" />
        <el-table-column prop="title" label="标题" width="200" />
        <el-table-column prop="bannerUrl" label="封面">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 50px" :src="scope.row.bannerUrl" :preview-src-list="[scope.row.bannerUrl]" lazy fit>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="bannerDesc" label="简介" width="300" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="primary" icon="el-icon-edit" circle />
              <el-button type="danger" icon="el-icon-delete" circle @click="delAttr(scope.row.attrId)" />
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-size="pageSize" :pager-count="11" layout="prev, pager, next" :total="total" class="bottom" />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Banner',
  data() {
    return {
      banners: [],
      form: {}
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>

.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;

  .box-card {
    width: 100%;
    height: 100%;

    .table {
      width: 100%;
      height: 470px;
    }

    .bottom {
      margin-top: 10px;
      display: flex;
      justify-content: center;
    }

  }
}
</style>
